<template>
  <div class="index">
    <div class="nav-box">
      <router-link :to="item.navLink"
                   tag="span"
                   v-for="(item,index) in navList"
                   :key="index"
                   class="nav-item "
                   :class="navHightLight ===item.navLink?'nav-item-select':''">{{item.navName}}</router-link>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import { ref, toRef, getCurrentInstance, computed, watch } from 'vue'
import { onBeforeRouteUpdate, useRoute, useRouter } from "vue-router";
import { findMusicHomePage } from '@/utils/api'
export default {
  setup() {
    const { ctx } = getCurrentInstance()
    const route = useRoute()
    const router = useRouter()
    const navList = ref([
      {
        navName: '个性推荐',
        navLink: '/'
      },
      {
        navName: '歌单',
        navLink: '/songSheet'
      },
      {
        navName: '主播电台',
        navLink: '/songSheet'
      },
      {
        navName: '排行榜',
        navLink: '/songSheet'
      },
      {
        navName: '歌手',
        navLink: '/songSheet'
      },
      {
        navName: '最新音乐',
        navLink: '/songSheet'
      },
    ])
    // const $router = ref(ctx.$router.currentRoute.value)
    // let navHightLight = ref($router.value.path)
    // let navHightLight = ref('/')
    let navHightLight = ref(route.path)

    onBeforeRouteUpdate(to => {
      navHightLight.value = to.path
    })


    return {
      navList,
      navHightLight,
    }
  }
}
</script>

<style lang='scss' scoped >
.index {
  .nav-box {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 20px;
    .nav-item {
      font-size: 14px;
      margin-right: 15px;
      cursor: pointer;
      position: relative;
      color: #666;

      &.nav-item-select {
        font-size: 22px;
        color: #000;
        font-weight: bold;
        &::after {
          width: 90%;
          height: 4px;
          content: "";
          background-color: $paimary;
          position: absolute;
          left: 50%;
          bottom: -8px;
          transform: translateX(-50%);
        }
      }
    }
  }
}
</style>